<template>
<div id="MendianType" class="page-blank">
  <van-nav-bar title="门店类型" left-arrow @click-left="goBack()"/>
  <div style="height: 1rem; display: flex; flex-direction: row; justify-content: space-around; align-items: center; border-bottom: 1px solid #ccc;">
    <van-button type="primary" size="small" @click="showBlank()">新增类型</van-button>       
  </div>
  <div class="flex-body">   
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
      <div class="tongji-box" v-for="(item, index) in list" :key="index" @click="showBlank( item )">
        <div class="tongji-item">
          <div class="tongji-row">
            <span>门店类型</span>
            <span class="right">
              {{ item.shopSortName }}
              <van-button round type="primary" size="small" @click.stop="deleteItem( item )">删除</van-button>
            </span>
          </div>
        </div>
      </div>
    </van-list>
  </div>
    
  <van-popup v-model="blank.show" position="bottom" :style="{ height: '100%' }">
    <div class="page-blank">
      <van-nav-bar title="新增" left-arrow @click-left="blank.show = false"/>
      <div class="flex-body">   
        <van-cell-group>  
          <van-field v-model.trim="blank.info.shopSortName"  required label="类型名称" placeholder="请输入类型名称"/>
        </van-cell-group>
        <van-button round type="info" size="small" :loading="submitLoading" @click="submit">提交</van-button>
      </div>
    </div>
  </van-popup>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import axios from '@/utils/request';

@Component
export default class MendianType extends Vue {

  list: any = []
  page: any = 1
  loading: any = false
  finished: any = false

  getList() {
    let page = this.page;
    let query: any = { page, size: 10 };
    axios.get('/api/ShopSortController/getShopSortList', query).then((res: any) => {      
      if( page != this.page ) return ;
      this.page = page + 1;
      let list = res.list||[];
      this.loading = false;
      this.list.push( ...list );
      if(res.isLastPage) this.finished=true;
    }).catch(() => {
      this.loading = false;
    });
  }

  goBack() {
    this.$router.go(-1);
  }

  submitLoading: any = false
  blank: any = {
    show: false,
    name: '出库申请',
    info: {}
  }
  deleteItem(item: any) {    
    this.$dialog.confirm({ message: `您确认要删除该类型吗？` }).then(() => {
      axios.put(`/api/ShopSortController/deleteShopSortList`, [ item.shopSortId ]).then(() => {
        this.list = [];
        this.page = 1;
        this.finished = false;
        this.getList();
      });
    })
  }
  showBlank(stockCategory: any) {
    this.blank.info = {};
    this.blank.show = true;
  }
  submit() {
    if( this.submitLoading ) return ;
    let numReg = /^([0-9]|[1-9][0-9]*)$/;
    this.submitLoading = true;
    if( !this.blank.info.shopSortName ) return this.$toast('请输入类型名称');
    axios.post('/api/ShopSortController/addShopSort', { ...this.blank.info, status: 0 }).then((res: any) => {
      this.submitLoading = false;
      this.blank.show = false;
      this.list = [];
      this.page = 1;
      this.finished = false;
      this.getList();
    }).catch(() => {
      this.submitLoading = false;
    });
  }

  mounted() {
  }
  
};
</script>

<style lang="scss">
#MendianType { 
}
</style>

